<script setup lang="ts">
const stats = [
  {
    title: "总用户数",
    value: "1,234",
    icon: "i-lucide-users",
    color: "primary",
  },
  {
    title: "今日活跃",
    value: "123",
    icon: "i-lucide-activity",
    color: "success",
  },
  {
    title: "系统消息",
    value: "5",
    icon: "i-lucide-bell",
    color: "warning",
  },
];
</script>

<template>
  <div class="p-4">
    <div class="mb-8">
      <h1 class="text-2xl font-bold mb-2">欢迎使用管理系统</h1>
      <p class="text-gray-500">今天是 {{ new Date().toLocaleDateString() }}</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <UCard
        v-for="stat in stats"
        :key="stat.title"
        class="hover:shadow-lg transition-shadow"
      >
        <div class="flex items-center">
          <div :class="`text-${stat.color} text-2xl mr-4`">
            <UIcon :name="stat.icon" />
          </div>
          <div>
            <div class="text-sm text-gray-500">{{ stat.title }}</div>
            <div class="text-2xl font-bold">{{ stat.value }}</div>
          </div>
        </div>
      </UCard>
    </div>

    <div class="mt-8">
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">系统公告</h3>
            <UButton color="primary" variant="ghost" icon="i-lucide-plus" />
          </div>
        </template>
        <div class="space-y-4">
          <div v-for="i in 3" :key="i" class="flex items-start space-x-4">
            <UIcon name="i-lucide-info" class="text-primary mt-1" />
            <div>
              <div class="font-medium">系统更新通知</div>
              <div class="text-sm text-gray-500">
                系统将于本周日进行例行维护，请提前做好相关准备。
              </div>
            </div>
          </div>
        </div>
      </UCard>
    </div>
  </div>
</template>
